<template>
  <Teleport to="body">
    <Transition name="modal">
      <div v-if="open" class="glass-modal-overlay" @click="handleOverlayClick">
        <div 
          class="glass-modal" 
          :class="[`glass-modal--${size}`]"
          @click.stop
        >
          <!-- 模态框头部 -->
          <div v-if="title || $slots.header || closable" class="glass-modal__header">
            <div class="glass-modal__title-section">
              <h3 v-if="title" class="glass-modal__title">{{ title }}</h3>
              <slot name="header"></slot>
            </div>
            <button 
              v-if="closable" 
              class="glass-modal__close"
              @click="handleClose"
            >
              ✕
            </button>
          </div>
          
          <!-- 模态框内容 -->
          <div class="glass-modal__body">
            <slot></slot>
          </div>
          
          <!-- 模态框底部 -->
          <div v-if="$slots.footer" class="glass-modal__footer">
            <slot name="footer"></slot>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
import { watch } from 'vue'

interface Props {
  open: boolean
  title?: string
  size?: 'small' | 'medium' | 'large' | 'full'
  closable?: boolean
  maskClosable?: boolean
}

interface Emits {
  (e: 'update:open', value: boolean): void
  (e: 'close'): void
}

const props = withDefaults(defineProps<Props>(), {
  size: 'medium',
  closable: true,
  maskClosable: true
})

const emit = defineEmits<Emits>()

const handleClose = () => {
  emit('update:open', false)
  emit('close')
}

const handleOverlayClick = () => {
  if (props.maskClosable) {
    handleClose()
  }
}

// 监听 ESC 键
watch(() => props.open, (isOpen) => {
  if (isOpen) {
    document.addEventListener('keydown', handleEscKey)
    document.body.style.overflow = 'hidden'
  } else {
    document.removeEventListener('keydown', handleEscKey)
    document.body.style.overflow = ''
  }
})

const handleEscKey = (event: KeyboardEvent) => {
  if (event.key === 'Escape' && props.closable) {
    handleClose()
  }
}
</script>

<style scoped>
.glass-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.glass-modal {
  background: rgba(30, 42, 58, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 尺寸变体 */
.glass-modal--small {
  width: 100%;
  max-width: 400px;
}

.glass-modal--medium {
  width: 100%;
  max-width: 600px;
}

.glass-modal--large {
  width: 100%;
  max-width: 800px;
}

.glass-modal--full {
  width: 95vw;
  height: 90vh;
  max-width: none;
  max-height: none;
}

.glass-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 24px;
  padding-bottom: 16px;
}

.glass-modal__title-section {
  flex: 1;
}

.glass-modal__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.glass-modal__close {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.glass-modal__close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  transform: scale(1.1);
}

.glass-modal__body {
  flex: 1;
  padding: 0 24px;
  overflow-y: auto;
  color: rgba(255, 255, 255, 0.9);
}

.glass-modal__header + .glass-modal__body {
  padding-top: 0;
}

.glass-modal__footer {
  padding: 16px 24px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.glass-modal__body + .glass-modal__footer {
  margin-top: 24px;
}

/* 动画效果 */
.modal-enter-active,
.modal-leave-active {
  transition: all 0.3s ease;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}

.modal-enter-from .glass-modal,
.modal-leave-to .glass-modal {
  transform: scale(0.9) translateY(-20px);
}

.modal-enter-to .glass-modal,
.modal-leave-from .glass-modal {
  transform: scale(1) translateY(0);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .glass-modal-overlay {
    padding: 10px;
  }
  
  .glass-modal--medium,
  .glass-modal--large {
    max-width: none;
    width: 100%;
  }
  
  .glass-modal--full {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
  
  .glass-modal__header,
  .glass-modal__body,
  .glass-modal__footer {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .glass-modal__title {
    font-size: 18px;
  }
}

/* 滚动条样式 */
.glass-modal__body::-webkit-scrollbar {
  width: 6px;
}

.glass-modal__body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.glass-modal__body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.glass-modal__body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}
</style>
